<template>
  <div class="body">
    <van-sticky class="nav">
      <van-nav-bar>
        <template #left>
          <van-icon name="arrow-left" color="#ddd" @click="$router.go(-1)" size="25px" />
          <img src="../../assets/3.png" style="width: 50px; height: 50px" />
          <h2 style="color: #604443">宠物志</h2>
        </template>
        <template #right>
          <van-popover placement="bottom-end"> </van-popover>
        </template>
      </van-nav-bar>
    </van-sticky>
    <div class="content">
      <div class="content_up">
        <div class="up_left">
          <img :src="UPL + `/${u_img}`" alt="" style="" />
          <span>{{ u_name }}</span>
        </div>
        <div class="up_right">
          <span>关注</span>
          <van-icon name="eye-o" color="pink" size="25" />
          <span>520</span>
          <van-icon name="share-o" />
        </div>
      </div>
      <div class="content_center">
        <p>{{ comments.b_content }}</p>
        <div class="image">
          <img :src="UPL + `/${item}`" alt="" v-for="item in arrimg[0]" />
        </div>
      </div>
      <div class="content_down">
        <div class="down_left">
          <div v-show="active == false" @click="add" class="addhelp">
            <van-icon name="good-job-o" /><span>{{ help.count }}</span>
          </div>
          <div v-show="active == true" @click="del" class="delhelp">
            <van-icon name="good-job-o" color="red" /><span>{{
              help.count
            }}</span>
          </div>
          <van-icon name="edit" /><span>233</span>
        </div>
        <div class="down_right">
          <div class="del" v-show="comments.u_id == u_id" @click="showConfirms(comments.b_id)">
            <van-icon name="delete-o" />
          </div>
        </div>
      </div>
    </div>
    <div class="comment">
      <div class="comment_write">
        <van-cell-group inset>
          <van-field v-model="message" rows="2" autosize type="textarea" maxlength="255" placeholder="你的看法"
            show-word-limit />
        </van-cell-group>
        <div class="comment_submit">
          <div class="help"></div>
          <button @click="cllickme">发布</button>
        </div>
      </div>
      <h3 style="padding: 5px; color: #333">评论:</h3>
      <van-empty v-if="c_comment[0] == null" description="你对该帖有什么看法呢
            " />
      <div v-else class="commnet_red" v-for="(item, i) in messages">
        <div class="user">
          <div>
            <img :src="UPL + `/${item.u_img}`" alt="" />
            <span>{{ item.u_name }}</span>
          </div>
          <div class="del" v-show="item.u_id == u_id" @click="showConfirm(item.c_id)">
            <van-icon name="delete-o" size="25px" />
          </div>
        </div>
        <van-popup position="bottom" :style="{ height: '30%' }"></van-popup>
        <div class="commentsmall">
          <p v-text="item.c_comment"></p>
          <span>第{{ i + 1 }}楼</span>
        </div>
        <div class="recomment">
          <div>
            <span>回复</span>
            <span>楼主:</span><span>回复</span><span>一楼:</span>
            <p>这是楼主对一楼的回复</p>
          </div>
        </div>
        <van-divider :style="{ color: '#999', borderColor: '#999', padding: '0 16px' }" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
import { circle } from "@/http/apis/circleApi";
import { showConfirmDialog } from "vant";
import "vant/es/dialog/style";
import router from "@/router";
import { useStore } from "vuex";
import baseURL from "../../http/baseURL";

const id = ref(useRoute().params.id); //上层传来的帖子id
const u_img = ref(useRoute().params.u_img); //上层传来的照片
let comments = reactive([]); //帖子详情
let message = ref([]); //输入的评论
let messages = ref({}); //查询的所有评论
let help = ref({}); //赞
let active = false; //点赞是否是激活状态
const store1 = useStore().state.user;
const u_id = ref(useRoute().params.u_id); //用户id
const u_name = ref(useRoute().params.name); //用户名
const UPL = baseURL.UPL;
const arrimg = reactive([]); //存放照片
const arrimgs = reactive([]); //存放照片
const c_comment = reactive([]); //评论内容

//通过id查询详情
function queryById() {
  let params = { b_id: id.value };
  circle.queryById(params).then((res) => {
    // console.log('id', res)
    comments.push(res.data.data[0]);
    comments = comments[0];
    // console.log('帖子内容', comments)
    arrimg.push(comments.b_img.split("&"));
  });
}
//查询所有评论
function queryAllComment() {
  let params = { b_id: id.value };
  circle.queryAllComment(params).then((res) => {
    // console.log( '评论',res)
    messages.value = res.data.data;
    c_comment.push(messages.value[0].c_comment);
    // console.log('评论内容',c_comment[0])
  });
}
//添加评论
function addComment() {
  let params = { u_id: u_id.value, b_id: id.value, c_comment: message.value };
  circle.addComment(params).then((res) => {
    message.value = null;
    queryAllComment();
  });
}
//删除评论
function delComment(c_id) {
  console.log(123);
  circle.delComment({ c_id }).then((res) => {
    queryAllComment();
  });
}
//查询所有点赞数量
function queryALLHelp() {
  let params = { b_id: id.value };
  circle.queryAllHelp(params).then((res) => {
    // console.log('点赞', res.data.data)
    help.value = res.data.data[0];
    // console.log('赞', help.value.count)
  });
}
//点赞
function addHelp() {
  let params = { b_id: id.value };
  circle.addHelp(params).then((res) => {
    // console.log(res)
    // console.log('help',help)
    queryALLHelp();
    active = true;
  });
}
function add() {
  // console.log(1)
  addHelp();
}
//取消点赞
function delhelp() {
  let params = { d_id: u_id };
  circle.delHelp(params).then((res) => {
    // console.log('取消点赞', res)
    // console.log(id.value)
    queryALLHelp();
    active = false;
  });
}
//取消点赞按钮调用方法
function del() {
  delhelp();
}
//调用方法添加评论
function cllickme() {
  addComment();
  queryAllComment();
  // router.go(0);
}
//删除时弹出框
function showConfirm(c_id) {
  // console.log(c_id)
  showConfirmDialog({
    message: "是否删除该条评论",
  })
    .then(() => {
      // on confirm
      delComment(c_id);
    })
    .catch(() => {
      // on cancel
    });
}
//删除帖子
function delComments(b_id) {
  console.log(b_id);
  let params = { b_id: b_id };
  circle.delComments(params).then((res) => {
    router.push("/home/circle");
  });
}
//删除时弹出框
function showConfirms(b_id) {
  // console.log(c_id)
  showConfirmDialog({
    message: "是否删除该条条帖子",
  })
    .then(() => {
      delComments(b_id);
      // on confirm
    })
    .catch(() => {
      // on cancel
    });
}

onMounted(() => {
  queryById();
  queryAllComment();
  queryALLHelp();
  // console.log();
});
</script>

<style lang="scss" scoped>
.body {
  height: 100vh;
  background-color: #eee;
}

.content {
  //帖子内容
  padding: 0 10px;
  // border: 1px solid #ddd;
  background-color: #eee;
  color: #646464;

  .content_up {
    //帖子上部分
    display: flex;
    justify-content: space-between;
    align-items: center;

    .up_left {
      padding: 5px;
      height: 50px;
      display: flex;

      img {
        border-radius: 50px;
        margin-left: -10px;
        width: 40px;
        height: 40px;
      }

      span {
        line-height: 50px;
        padding: 0 10px;
      }
    }

    .up_right {
      span {
        padding: 0 10px;
      }

      margin-right: 10px;
    }

    border-bottom: 1px solid #eee;
  }

  .content_center {
    h3 {
      padding: 0 0 10px 0;
      color: #333;
    }

    //帖子主体内容
    .image {
      display: flex;
      flex-wrap: wrap;
      padding: 0 10px;

      img {
        border: 1px solid #eee;
        margin: 10px 10px;
        width: 100px;
        height: 100px;
        border-radius: 15px;

        &:nth-child(n) {
          margin-left: 0;
        }
      }
    }
  }

  .content_down {
    //帖子下部
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #eee;

    .down_left {
      display: flex;
      margin: 0 15px;
      padding: 10px 0;

      span {
        padding: 0 10px;
      }
    }

    .down_right {
      margin: 0 15px;
      padding: 10px 0;
    }
  }
}

.comment {
  background-color: #eee;

  .comment_write {
    margin-top: 10px;

    .comment_submit {
      display: flex;
      justify-content: space-between;

      button {
        border: 0;
        background-color: #ed4845;
        padding: 10px 18px;
        border-radius: 10px;
        color: white;
        margin: 10px 20px;

        &:active {
          opacity: 0.5;
        }
      }
    }
  }

  .commnet_red {
    margin: 10px;

    .user {
      height: 25px;
      display: flex;
      margin-left: 5px;
      justify-content: space-between;

      div {
        height: 25px;
        display: flex;

        img {
          width: 25px;
          height: 100%;
          border-radius: 30px;
        }

        span {
          display: block;
          height: 25px;
          padding: 0 5px;
          line-height: 25px;
        }
      }

      .del {
        margin-right: 5px;

        &:active {
          opacity: 0.5;
        }
      }
    }

    .commentsmall {
      margin: 15px 0;
      margin-left: 25px;

      span {
        font-size: 6px;
        padding: 5px;
      }
    }

    .recomment {
      margin-left: 35px;
      background-color: #ddd;
      border-radius: 5px;

      span {
        padding: 5px;
      }

      p {
        padding: 10px;
      }
    }
  }
}
</style>
